import { createComponent } from '@mpxjs/core'
import {DetailOfCustomEvent} from "../../utils/typies";

interface SearchInputComponentVo {
  data: {
    active: boolean;
    focus: boolean;
  }
}

createComponent<SearchInputComponentVo['data']>({
  properties: {
    value: {
      type: String,
      default: ''
    }
  },
  data: {
    active: false,
    focus: false
  },
  methods: {
    changeFocus(focus: boolean) {
      this.focus = focus;
      if (focus) {
        this.changeActive(true);
      }
    },
    changeActive(active: boolean) {
      this.active = active;
      // this.setData({ active });
      this.triggerEvent('active-change', active);
    },
    handleClear() {
      this.triggerEvent('clear');
    },
    handleConfirm(event: DetailOfCustomEvent<{ value: string }>) {
      this.triggerEvent('confirm', event.detail.value || '');
    }
  }
})
